<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <title>deCONZ | dresden elektronik</title>
    <style>
      :root {
        /* Home Assistant Light Theme */
        --primary-color: #03a9f4;
        --primary-text-color: rgba(0, 0, 0, 0.87);
        --secondary-text-color: rgba(0, 0, 0, 0.6);
        --disabled-text-color: rgba(0, 0, 0, 0.38);

        --background-color: #fafafa;
        --card-background-color: #ffffff;
        --divider-color: rgba(0, 0, 0, 0.12);

        --toolbar-background: #009AC7;
        --toolbar-text-color: #fff;

        --button-bg: #009AC7;
        --button-text-color: #fff;
        --button-hover-color: #006787;

        --link-color: var(--primary-color);
        --link-hover-color: #007aa3;

        --focus-color: #989898;

        --border-radius: 12px;
        --shadow: 0 1px 4px rgba(0,0,0,0.06);
      }
      @media (prefers-color-scheme: dark) {
        :root {
          /* Home Assistant Dark Theme */
          --primary-color: #03a9f4;
          --primary-text-color: #e1e1e1;
          --secondary-text-color: #9c9c9c;
          --disabled-text-color: rgba(255, 255, 255, 0.3);

          --background-color: #111111;
          --card-background-color: #1C1C1C;
          --divider-color: rgba(255, 255, 255, 0.12);

          --toolbar-background: #101E24;
          --toolbar-text-color: var(--primary-text-color);

          --button-bg: #009AC7;
          --button-text-color: #fff;
          --button-hover-color: #006787;

          --link-color: var(--primary-color);
          --link-hover-color: #007aa3;

          --focus-color: #989898;

          --border-radius: 12px;
          --shadow: 0 1px 4px rgba(0,0,0,0.18);
        }
      }
      html, body {
        height: 100%;
        margin: 0;
        font-family: Roboto, sans-serif;
        background: var(--background-color);
        color: var(--primary-text-color);
        transition: background 0.3s, color 0.3s;
      }
      .flex {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      .toolbar {
        display: flex;
        align-items: center;
        font-size: 20px;
        height: 55px;
        background-color: var(--toolbar-background);
        color: var(--toolbar-text-color);
        padding: 0 24px;
        font-weight: 400;
        box-shadow: var(--shadow);
      }
      .toolbar h1 {
        margin: 0 0 0 60px;
        font-size: 20px;
        font-weight: 400;
      }
      .content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .card {
        background: var(--card-background-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        border: 1px solid var(--divider-color);
        padding: 32px 24px;
        max-width: 400px;
        width: 100%;
        text-align: center;
      }
      .card p {
        font-size: 1rem;
        line-height: 1.5;
        margin: 10px 0;
        color: var(--primary-text-color);
      }
      a {
        text-decoration: none;
        color: var(--link-color);
        font-weight: 500;
        transition: color 0.3s;
      }
      a:hover {
        color: var(--link-hover-color);
        text-decoration: none;
      }
      a:focus-visible {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
        border-radius: 4px;
      }
      .button-row {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 16px;
      }
      .mdc-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        font-family: Roboto, sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        padding: 0 20px;
        min-width: 80px;
        height: 40px;
        border-radius: 8px;
        border: none;
        background-color: var(--button-bg);
        color: var(--button-text-color);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        transition: background 0.3s, color 0.3s, box-shadow 0.2s;
        cursor: pointer;
        outline: none;
        text-decoration: none;
      }
      .mdc-button:focus {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
      }
      .mdc-button:focus-visible {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(3,169,244,0.35);
      }
      .mdc-button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
      }
      .mdc-button:hover {
        background-color: var(--button-hover-color);
        color: var(--button-text-color);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      }
      .ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        background-color: rgba(255, 255, 255, 0.6);
        pointer-events: none;
      }
      @keyframes ripple {
        to {
          transform: scale(4);
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .ripple { display: none !important; }
        .mdc-button { transition: none !important; }
      }
      @media (forced-colors: active) {
        .mdc-button {
          background: ButtonFace;
          color: ButtonText;
          border: 1px solid CanvasText;
        }
        .mdc-button:hover {
          background: Highlight; 
          color: HighlightText; 
        }
        .mdc-button:focus {
          outline: 2px solid Highlight; 
          outline-offset: 2px; 
        }  
      }
      @media (max-width: 480px) {
        .card {
          padding: 20px 16px;
          max-width: 90%;
        }
        .mdc-button {
          min-width: 100px;
          height: 38px;
          font-size: 0.9rem;
        }
      }
      @media (max-width: 320px) {
        .button-row {
          flex-direction: column;
          gap: 12px;
        }
        .mdc-button {
          width: 82%;
        }
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <div class="toolbar"><h1>Zigbee network by dresden elektronik</h1></div>
      <div class="content">
        <div class="card">
          <p>
            You can use the
            <a href="https://phoscon.de/en/conbee/software#phoscon-app" target="_blank" rel="noopener noreferrer">Phoscon App</a>
            or the
            <a href="https://phoscon.de/en/conbee/software#deconz" target="_blank" rel="noopener noreferrer">deCONZ GUI</a>
            through VNC.
          </p>
          <div class="button-row">
            <a href="pwa/index.html" class="mdc-button">Phoscon</a>
            <a href="novnc/vnc_lite.html?scale=yes" class="mdc-button">deCONZ</a>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.querySelectorAll('.mdc-button').forEach(button => {
        button.addEventListener('click', function (e) {
          const ripple = document.createElement('span');
          ripple.classList.add('ripple');
          const rect = button.getBoundingClientRect();
          const size = Math.max(rect.width, rect.height);
          ripple.style.width = ripple.style.height = size + 'px';
          const isKeyboard = (e.detail === 0 && e.clientX === 0 && e.clientY === 0);
          const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
          const xRel = isKeyboard ? rect.width / 2 : (e.clientX - rect.left);
          const yRel = isKeyboard ? rect.height / 2 : (e.clientY - rect.top);
          const x = clamp(xRel, 0, rect.width);
          const y = clamp(yRel, 0, rect.height);
          ripple.style.left = (x - size / 2) + 'px';
          ripple.style.top = (y - size / 2) + 'px';
          button.appendChild(ripple);
          setTimeout(() => ripple.remove(), 600);
        });
      });
    </script>
  </body>
</html>
